<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
>

<html lang="en">
<head>
	<head th:include="header::header"></head>
	<title>普惠商城-个人中心-账户设置-账户安全-手机号</title>
</head>
<body>
	
	<!-- 顶部导航条开始 -->
	<div  th:include="personal/personalhead::order-personalhead-nav"></div>
	<!-- 顶部导航条结束 -->
	<!-- 顶部搜索栏部分开始 -->
	<div  th:include="personal/personalsearch::order-personalsearch-nav"></div>
	<!--个人中心中间主体框架  -->
	<div class="centerbody personal_middle">
		<!-- 左侧通用导航栏 -->
		<div class="personal_middle_nav" th:include="commonfragment::order-left-menu-nav"></div>
		<div class="centerbody personal_middle_main">
			<div class="personal_middle_main_tit">
				<span>帐户设置</span>><span>帐户安全</span>><span>修改手机号</span>
			</div>
			<!-- 订单tab标签 -->
			<div data-role="page">
        		<div data-role = "content-floud">
					<div class="publicBox">
						<div class="realName pad_20">
							<span th:if = "${member}">
								<p class="realNameForm">
									<label>原手机号：</label>
									<input type="text" th:value="${member.memberPhone}" readonly="readonly" id = "orig_phone">
								</p>
							</span>
							<p class="realNameForm">
								<label>新手机号：</label>
								<input type="text" value="" placeholder="请输入您的新手机号" id = "new_phone">
							</p>
							<p class="realNameForm">
								<label>支付密码：</label>
								<input type="password" value="" placeholder="请输入您的支付密码" id = "pay_pwd">
							</p>
							<p class="realNameForm">
								<label>手机验证码：</label>
								<span class="reaCodeBox">
								<input class="realTxtCode" type="text" value="" placeholder="请输入验证码" id = "sms_code">
								<em class="realNameCode">获取验证码</em>
								</span>
							</p>
							<p class="realNameBut"><button name="" id = "update_phone_sub">修改</button></p>
						</div><!--LineConf-->
					</div><!--个人信息-->
				</div>
   			 </div>
			<!-- token -->
			<input type="hidden" id="user_token"/>
		</div>
		<div style="clear:both;"></div>
	</div>
	
	<!-- 页面底部 -->
	<div th:include="footer::footer"></div>

</body>
<script th:inline="javascript">
$(function(){
	/*tab标签切换*/

	//获取短信验证码
	var validCode = true;
	$(".realNameCode").click (function  () {
		callvalidCode();
	})
	function callvalidCode() {
		var time = 30;
		var code = $(".realNameCode");
		if (validCode) {
			validCode = false;
			if(!isNotNull("new_phone")){
				validCode = true;
				return;
			}
			if(!checkTel("new_phone")){
				validCode = true;
				return;
			}
			$.ajax({
				url : "/member/sendSmsCode",
				type : "post",
				dataType : "json",
				data : {
					"phone" : $('#new_phone').val()
				},
				error : function() {
					layer.msg("系统繁忙，请稍后再试！");
					validCode = true;
				},
				success : function(data) {
					if (data.code == "200") {
						code.addClass("msgs1");
						$("#user_token").val(data.token);
						var t = setInterval(function() {
							time--;
							code.html(time + "秒");
							if (time == 0) {
								clearInterval(t);
								code.html("重新获取");
								validCode = true;
								code.removeClass("msgs1");
							}
						}, 1000)
					} else {
						layer.msg(data.message);
						validCode = true;
					}
				}
			})
		}
	}

    function tabs(tabTit,on,tabCon){
        $(tabCon).each(function(){
            $(this).children().eq(0).show();
        });
        $(tabTit).each(function(){
            $(this).children().eq(0).addClass(on);
        });
        $(tabTit).children().click(function(){
            $(this).addClass(on).siblings().removeClass(on);
            var index = $(tabTit).children().index(this);
            $(tabCon).children().eq(index).show().siblings().hide();
        });
    }
    tabs(".LineTitle","Line_on",".LineCon");
	$(".box1 input:checked").parent().parent().addClass("selected");
	$(".box1 input").change(function(){
        $(".box1 input:checked").parent().parent().addClass("selected").siblings().removeClass("selected");
    });
   		$('input.paybutton').eq(0).addClass('choose');
   		
   		$('input.paybutton').hover(function(){
   			$(this).addClass('choose');
   			$(this).siblings().removeClass('choose');
   		},function(){
   			$(this).removeClass('choose');
   		})
    	$('.cancel_small').click(function(){
			$('.shadow').css('display','none');
			$('.login_box_2').css('display','none');
		})
		
		$('.add_info').click(function(){
			$('.shadow').css('display','block');
			$('.login_box_2').css('display','block');
		})
		$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		$(window).resize(function(){
			$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		})
		 $("#hear li").click(function(){
    $(this).css({
         borderBottom: "2px solid red",
         height:"43px"
    }).siblings().css({
        borderBottom: "none",
        height:"45px"
    });
});                
                         
$("#hear li").click(function(){
        $(this).addClass("action").siblings().removeClass("action");
        var index = $(this).index();
        $("#contentop li").eq(index).css("display","block").siblings().css("display","none");
        });
})
var tipsIndex;
$(function(){
	bingClosetipsIndex();
});
//非空验证
function isNotNull(id){
	var val = $('#'+id).val();
	if(val.trim().length < 1){
		tipsIndex = layer.tips("此处不能为空","#"+id,{tips: 2});
		return false;
	}
	return true;
};
function bingClosetipsIndex(){
	$('#new_phone').on("focus",function(){
		if(tipsIndex){
			layer.close(tipsIndex);
		}
	});
	$('#pay_pwd').on("focus",function(){
		if(tipsIndex){
			layer.close(tipsIndex);
		}
	});
	$('#sms_code').on("focus",function(){
		if(tipsIndex){
			layer.close(tipsIndex);
		}
	});
}
// 提交前校验
$('#update_phone_sub').click(function(){
	if(isNotNull("orig_phone")
			&& isNotNull("new_phone") && checkTel("new_phone")
			&& isNotNull("pay_pwd") && isNotNull("sms_code")){
		$('#update_phone_sub').attr("disable", true);
		$.ajax({
			url : "/member/verifySmsCode",
			type : "post",
			dataType : "json",
			data : {
				"phone" : $('#new_phone').val(),
				"smsCode" : $('#sms_code').val()
			},
			error : function() {
				layer.msg("系统繁忙，请稍后再试！");
				$('#update_phone_sub').attr("disable", false);
			},
			success : function(data) {
				$('#update_phone_sub').attr("disable", false);
				if (data.code == "200") {
					updatesub();
				} else {
					layer.msg(data.message);
				}
			}
		})
	}
})
// 修改正式提交
function updatesub(){
	var orig_phone = $("#orig_phone").val();
	var new_phone = $("#new_phone").val();
	var pay_pwd = $("#pay_pwd").val();
	$.ajax({
		url:"/account/updatePhoneSubmit",
		type:"post",
		dataType:"json",
		data:{"origPhone":orig_phone,"newPhone":new_phone,"payPwd":pay_pwd,"token":$("#user_token").val()},
		error:function(){
			layer.msg("系统繁忙，请稍后再试");
		},
		success:function(data){
			if(data.code == "200"){
				window.location.href="/account/commonPrompt?pCode=4";
			}else{
				layer.msg(data.message);
			}
		}
	})
}
// 验证手机号
function checkTel(id){
	var flag = false;
	if($("#new_phone").val().trim() == $("#orig_phone").val().trim()){
		setTips(id,"修改的手机号不能和原手机号相同");
		return flag;
	}
    var isMob=/^1(3|4|5|7|8)\d{9}$/;
    var mobile = $("#"+id).val();
    if (isMob.test(mobile)){
    	$.ajax({
    		url:"/member/checkPhone",
    		type:"post",
    		dataType:"json",
    		async:false,
    		data:{
    			"phone":$("#"+id).val()
    		},
    		success : function(data){
    			if(data.code == "200"){
    				setTips(id,"账号已存在");
				}else{
					flag = true;
				}
    		}
    	});
    }else {
    	setTips(id,"手机号格式有误");
    } 
    return flag;
}
function setTips(id,msg){
	tipsIndex = layer.tips(msg,"#"+id,{tips: 2});
}
</script>

</html>